<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>
        body{
            background: #000;
            text-align: center;
        }
        canvas{
            background: #fff;
        }
        span{
            color: #fff;
            font-size: 50px;
        }
    </style>
    <script>
        function d2a(n){
            return n*Math.PI/180;
        }
        function rnd(n,m){
            return parseInt(Math.random()*(m-n))+n;
        }
        window.onload=function(){
            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d'); //画笔

            var cx=200;
            var cy=200;
            var r=100;

            var arr=[120,50,90,180,40,300];//数据 6个饼

            var sum=0;//总份额
            for(var i=0; i<arr.length; i++){
                sum+=arr[i];
            }


            var aDeg=[];
            for(var i=0; i<arr.length; i++){
                aDeg[i]=arr[i]/sum*360;// 当前份额/总份额 * 360 = 1个饼角度
            }

            //画饼
            /*gd.beginPath();
            gd.moveTo(cx,cy);
            gd.arc(cx,cy,r,d2a(0),d2a(aDeg[0]),false);
            gd.fill();

            gd.beginPath();
            gd.fillStyle='red';
            gd.moveTo(cx,cy);
            gd.arc(cx,cy,r,d2a(aDeg[0]),d2a(aDeg[0]+aDeg[1]),false);
            gd.fill();

            gd.beginPath();
            gd.fillStyle='blue';
            gd.moveTo(cx,cy);
            gd.arc(cx,cy,r,d2a(aDeg[0]+aDeg[1]),d2a(aDeg[0]+aDeg[1]+aDeg[2]),false);
            gd.fill();*/

            function drawPie(start,end){
                gd.beginPath();
                gd.fillStyle='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
                gd.moveTo(cx,cy);
                gd.arc(cx,cy,r,d2a(start),d2a(end),false);
                gd.fill();
            }

            var d=0;
            for(var i=0; i<aDeg.length; i++){
                drawPie(d,aDeg[i]+d);
                d+=aDeg[i];
            }
        };
    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600">
        <span>您的浏览器版本过低了，不支持canvas</span>
    </canvas>
</body>
</html>




